/* ------------------------------------------------ */
/* 5.0 STYLING: Can be removed once 5.0 comes out.
/* ------------------------------------------------ */
/* FONT AWESOME CODE */
.fas, .far, .fa { font-weight:900 !important; }

/* ANIMATION CLASSES */
.recentlyAdded { background:#d8f5d7; animation: recentAddition 1s ease 0s 1 forwards; transform: scale(1,1); }
.recentlyRemoved { background:#f1bebe; animation: recentRemoval .5s ease 0s 1 forwards; transform: scale(0,0); }
.slideUp { animation: slideUp 1s ease 0s 1 forwards; }
.slideDown { animation: slideDown 1s ease 0s 1 forwards; }
.fillMeIn { animation: fillMeIn .5s linear 0s 1 alternate; }
.noticeMe { animation: noticeMe .5s linear 0s 1 alternate; }

/* UNIVERSAL CLASSES */
.noPaddingTop { padding-top:0px; }
.noPaddingLeft { padding-left:0px; }
.noPaddingRight { padding-right:0px; }
.noPaddingBottom { padding-bottom:0px; }

.noMargin { margin:0px !important; }
.noMarginTop { margin-top:0px !important; }
.noMarginLeft { margin-left:0px !important; }
.noMarginRight { margin-right:0px !important; }
.noMarginBottom { margin-bottom:0px !important; }

.textAlignLeft { text-align:left; }
.textAlignRight { text-align:right; }
.textAlignCenter { text-align:center; }

.hidden { display:none !important; height:0px; width:0px; overflow:hidden; opacity:0; }
.floatLeft { float:left; }
.floatRight { float:right; }
.clear { clear:both; }
.leftDottedLine { border-left:1px dotted #ccc !important; padding-left:5px !important; }
.inputNameWidth { width: calc(50% - 23px) !important; }
.inputCityWidth { width: calc(100% - 139px) !important; }
.inputLotWidth, .inputStateWidth, .inputZipWidth { width:45px !important; }
.inputStreetWidth { width: calc(100% - 94px) !important; }
.inputWithPrefix { width: calc(100% - 40px) !important; }
.display-block { display:block; }
.display-inline { display:inline-block; }
.noWrap { white-space:nowrap; }
.noEllipsis { text-overflow:clip; }

/* UNIVERSAL ATTRIBUTES */
[empty-hide=""], [empty-hide="null"] { display:none !important; }
[empty-show=""], [empty-show="null"] { display:block !important; }
[empty-inline=""], [empty-inline="null"] { display:inline-block !important; }
[contentEditable="true"] { white-space: pre-wrap; display:inline-block; word-wrap: break-word; }
[contentEditable="true"]:empty:before { content:attr(placeholder); font-weight:300; font-size:12px; color:#999; opacity:.8; }
[contenteditable]:focus { outline: 0px solid transparent; }
[input-select] { cursor:pointer; display:inline-block; vertical-align:top; border:1px solid #ccc; font-family:inherit; padding:0px 15px 0px 5px; line-height:24px; height:26px; text-overflow:ellipsis; -webkit-appearance: none; -moz-appearance: none; outline:medium none; background:transparent; background:#fff url('/Images/site-templates/svg/dropdown-arrows.svg') no-repeat right 2px center; background-size:14px; box-shadow:1px 1px 2px #fff inset; display:inline-block; vertical-align:top; border-radius:3px; color:#3677cb; }
[required]::before, required::before, .required { position:relative; font-family:FontAwesome; top:5px; left:2px; content:"\f005"; color:#990000; font-size:5px; z-index:100; }
[disable-hover] { pointer-events:none; transition-delay:0s !important; }
[onclick] { cursor:pointer; }

/* POPUP FORMATTING */
.transPopup { font-size:16px; }

/* PRINT FORMATTING */
.print-only { display:none; }

/* OTHER */
::placeholder, ::-webkit-input-placeholder { color:#999; opacity:.8; }

/* LOGGED IN FORMATTING */
loggedIn { position:sticky; top:0; display:block; background:#f1f1f1; padding:5px; font-family:'Open Sans', sans-serif; margin-top:5px; white-space:nowrap; text-align:right; z-index:200; }
loggedIn .loggedInAsBox { display:inline-block; vertical-align:top; font-size:13px; line-height:13px; color:#3677cb; line-height:16px; padding-left:10px; }
loggedIn .loggedInAsBox strong { display:inline-block; vertical-align:top; overflow:hidden; text-overflow:ellipsis; }
loggedIn .loggedInAsBox span { display:inline-block; vertical-align:top; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

account, customer, invoice { position:relative; display:inline-block; vertical-align:top; font-size:0px; text-align:left; }
help-text, text, loggedIn strong { position:relative; display:inline-block; vertical-align:top; text-align:left; color:#000; font-weight:700; line-height:24px; font-size:13px; }
selection { position:relative; cursor:default; display:inline-block; vertical-align:top; text-align:left; border:1px solid transparent; border-radius:3px; padding:0px 16px 0px 0px; background:transparent; background-size:14px; font-size:12px; line-height:24px; color:#000; }
selection[popover] { border-color:#ccc; background:#fff url(/Images/site-templates/svg/dropdown-arrows.svg) no-repeat right 2px center; background-size:14px; padding:0px 16px 0px 7px; color:#3677cb; cursor:pointer; }
selection-link { position:relative; display:inline-block; vertical-align:top; line-height:24px; font-size:13px; cursor:pointer; padding:0px 5px; }
/* account[identifier=""] { display:none; } */
customer[identifier=""] .loggedInAsBox selection[popover="select"][value="customer"] { color:#999; }
settings { float:left; display:inline-block; vertical-align:top; cursor:pointer;  }
settings:hover bubble { background:#3677cb; color:#fff; }
settings bubble { position:relative; display:inline-block; font-size:20px; height:28px; text-align:center; line-height:28px; background:#fff; border:2px solid #fff; border-radius:3px; color:#3677cb; transition:all .5s ease; padding:0px 5px; }
settings name { position:relative; font-size:16px; font-weight:400; line-height:28px; display:inline-block; vertical-align:top; }

.selectedDefault, .selectedUnique { display:none; }
.selectedDefault.active, .selectedUnique.active { display:block; }


/* DEFAULT TAG FORMATTING */
html, body { margin:0px; font-family: 'Open Sans', sans-serif; }
a { text-decoration:none; }
button { cursor:pointer; }
select::-ms-expand { display: none; }
input[type="date"][value=""] { color:#ccc; }

password-toggle { position:absolute; display:inline-block; font-family:FontAwesome; line-height:30px; vertical-align:top; right:0px; font-size:16px; cursor:pointer; width:25px; height:20px; color:#999; background-color: rgba(255,255,255,.7); transition: all .5s ease; }
password-toggle:hover { color:#3677cb; }
password-toggle::before { content:"\f070";  }
password-toggle[show]::before { content:"\f06e"; }

required { position:absolute; }
switch { display:inline-block; vertical-align:top; white-space:nowrap; background:#ccc; font-size:0px; border-radius:20px; padding:2px; }
    switch button { color:#fff; background:transparent; height:32px; font-size:12px; font-weight:700; line-height:32px; border:1px solid transparent; text-align:center; border-radius:0px; border-radius:18px; padding:0px 10px; }
    switch:not([disabled]) button:not([status="active"]):hover { background:#fff; color:#3677cb; }
    switch button[status="active"] { background:#fff; color:#333; }
    switch[disabled] { background:#000; cursor:not-allowed; }
    switch[disabled] button { cursor:not-allowed; }
    switch input { display:none; }

input[disabled], input-group[disabled], select[disabled], button[disabled], button[disabled]:hover, button.xo-btn[disabled], button.xo-btn[disabled]:hover { background:#f1f1f1; cursor:not-allowed; border:1px solid #ddd; box-shadow:none; color:#666; text-shadow:none; }
switch button[disabled][status="active"] { background:#f1f1f1; }

toggle-btn { position:relative; display:inline-block; width:52px; height:auto; padding:2px; background:#ccc; border-radius:20px; text-align:left; font-size:14px; color:#999; cursor:pointer; transition:all .5s ease; }
    toggle-rnd { position:relative; display:inline-block; height:32px; width:32px; background:#fff; text-align:center; line-height:32px; border-radius:50%; transition:all .5s ease; }
    toggle-btn.active, toggle-btn[active] { background:#3677cb; color:#3677cb; }
    toggle-btn.active toggle-rnd, toggle-btn[active] toggle-rnd { margin-left:20px; }
    toggle-btn[disabled] { background:#000; cursor:not-allowed; }
    toggle-btn[disabled] toggle-rnd { color:#000; }

angle-divider, angle-divider-inner { position:relative; display:inline-block; }
angle-divider { z-index:100; width:0; height:0; margin:-2px 0px; border-left:8px solid #ccc; border-top:19px solid transparent; border-bottom:19px solid transparent; }
angle-divider-inner { width:0px; height:0px; margin:-19px 0px 0px -9px; border-left:8px solid #fff; border-top:19px solid transparent; border-bottom:19px solid transparent; }

input-group { position:relative; display:inline-block; vertical-align:top; border:1px solid #ccc; text-align:left; white-space:nowrap; background:#fff; }
    input-group[focused] { border-color:#3677cb; box-shadow:0px 0px 5px #3677cb; }
    input-group[type="hidden"] { display:none !important; }
    input-group input:first-child { padding-left:5px; }
    input-group input:last-child { padding-right:5px; }
    input-group input:only-child { width:100%; }
    input-group input { border:0px !important; padding:0px; background:transparent; text-overflow:ellipsis; outline: none; }
    input-group input[type="file"] { height:20px !important; padding:7px 5px !important; line-height:20px !important; }
    input-group suffix, input-group prefix, input-group infix { position:relative; display:inline-block; vertical-align:top; line-height:24px; color:#000; min-width:15px; text-align:center;padding:0px 2px; }

    input-group select:first-child { padding-left:5px; }
    input-group select:only-child { width:100%; }
    input-group select { cursor:pointer; height:24px; border:0px !important; padding-right:15px; font-family:inherit; text-overflow:ellipsis; -webkit-appearance: none; -moz-appearance: none; background:transparent url('/Images/site-templates/svg/dropdown-arrows.svg') no-repeat right 2px center; background-size:14px; box-shadow:1px 1px 2px #fff inset; display:inline-block; vertical-align:top; border-radius:3px; outline: none; }

    /*select { display:inline-block; vertical-align:top; border:1px solid #ccc;  padding:0px 15px 0px 5px; line-height:24px; height:26px;    color:#3677cb; }*/
    input-group suffix, input-group prefix { position:relative; display:inline-block; vertical-align:top; line-height:24px; color:#000; min-width:15px; text-align:center; padding:0px 2px; }
    input-group spinner { position:relative; display:inline-block; vertical-align:top; line-height:24px; color:#999; width:24px; text-align:center; font-size:14px; }

    input-group checkbox { width:24px; height:24px; line-height:24px; margin:2px; }
subtitle { position:relative; display:block; color:#000; }
padding { position:relative; display:block; padding:20px; }
sub-padding { position:relative; display:block; padding:10px; }

toggle { position:relative; display:block; transition:all .5s linear; }
    toggle[status="hide"] { max-height:0px; overflow:hidden; }
    toggle[status="show"] { max-height:initial; overflow:inherit; }

error-message { position:relative; display:block; transition:all .5s linear; color:#990000; font-size:12px; }
error-message[status="hide"] { display:none; }
error-message[status="show"] { display:block; }
error-message[status="show"]::before { position:relative; font-family:FontAwesome; top:-5px; left:2px; content:"\f005"; color:#990000; font-size:5px; z-index:100; padding-right:5px; }

/* SELECT-INPUT */
select-input { position:relative; display:inline-block; background:#fff url('/Images/site-templates/svg/dropdown-arrows.svg') no-repeat right 2px center; background-size:14px; }
select-input[focus="true"] si-select { display:block; z-index:100; max-width:100%; }
select-input suffix { display:none; margin-left:-34px; width:24px; padding:0px 2px; }
select-input input { padding-right:20px !important; }
select-input[loading="true"] { background:#fff; }
select-input[loading="true"] suffix { display:inline-block; }

si-select { display:none; position:absolute; top:35px; min-width:100%; max-height:300px; box-shadow:0px 0px 5px #ccc; border-radius:3px; background:#f9f9f9; overflow-y:auto; overflow-x:hidden; }
si-select si-option { position:relative; display:block; padding:0px 20px 0px 10px; font-size:12px; line-height:24px; cursor:pointer; margin:0px 1px; border-radius:3px; color:#000; }
si-select si-option.active, si-select si-option:hover { background:#3677cb; color:#fff; }
si-select si-option.focus, si-select si-option.focus:hover { background:#f1f1f1; color:#3677cb; }
si-select si-option.active:hover { box-shadow:inset 0 0 3px 1px #aeaeae; }
si-select si-option img { height:20px; margin:-2px 5px -2px -6px; vertical-align:top; border-radius:3px; }

si-select si-option .si-image { position:relative; display:inline-block; vertical-align:top; margin-right:5px; width:30px; height:30px; background:#fff; border-radius:50%; text-align:center; margin:5px 5px 5px 0px; border:1px solid #ccc; }
si-select si-option .si-image img { max-height:80%; max-width:80%; margin:0px; vertical-align:middle; }
si-select si-option .si-text { position:relative; display:inline-block; vertical-align:top; width: calc(100% - 30px); font-size:12px; line-height:14px; padding:5px; overflow:hidden; text-overflow:ellipsis; }


/* FILE-INPUT */
file-input { display:block; position:relative; overflow:hidden; width:100%; text-align:center; background:#fff; color:#3677cb; border:1px solid #ccc; }
file-input[uploaded] { background:#f1f1f1; }
file-input[uploaded] reset { display:inline-block; }
file-input[uploaded] input[type="text"] { width: calc(100% - 100px); }
file-input input[type="text"] { display:inline-block; font-family:inherit; font-size:14px; min-height:26px; line-height:26px; vertical-align:top; width: calc(100% - 70px); }
file-input input[type="file"] { position:absolute; opacity:0; left:0; top:0; width:100%; height:100%; overflow:hidden; z-index:2; }
file-input reset { position:relative; display:none; width:22px; height:22px; text-align:center; line-height:22px; transform: rotate(45deg); transition:all .5s ease; cursor:pointer; margin:2px; background:#f1f1f1; border-radius:50%; font-size:22px; }
file-input reset:hover { color:#990000; }
file-text, file-input label { position:relative; display:block; background:#edf7ff; text-align:center; z-index:1; cursor:pointer; }

/* Scroll-bar Widget */
scrollbar { position:sticky; top:0px; height:20px; display:block; width:100%; overflow:auto; }
c-scroll { position:relative; display:block; height:20px; }

/* OLD CSS */
.wraptocenter { display: table-cell; text-align: center; vertical-align: middle; }
.wraptocenter * { vertical-align: middle; }
.date { font-size:130%; font-weight:bold; }

#headerErrorMsg { background-color:#F66; font-size:18px; padding:.5em 1.4em; text-align:center; }
#headerErrorMsg .errorMsgTitle { display:inline-block; font-weight:bold; padding-right:4px; }
#headerErrorMsg i { float:right; }


/* ------------------------------------------------ */
/*                  NEW XO STYLING                  */
/* ------------------------------------------------ */
/* Basic Styling */
a, [link-style] { color:#3677cb; cursor:pointer; }
a:hover, [link-style-hover]:hover { color:#5ea0f4; }
::placeholder { font-style:italic; color:#ccc; }
.border-right { border-right:1px solid #ccc !important; border-radius:0px; margin-right:5px; }

[bg-hover] { cursor:pointer; }
[bg-hover]:hover { background:#edf7ff; }

.arrow-box { width:46px; height:20px; overflow:hidden; margin:2px 0 -1px 10px; }
.up-arrow { width:50px; height:50px; margin-top:14px; transform: rotate(45deg); background:#f1f1f1; border-radius:3px; }

.box-border { padding:10px; border-radius:5px; }
.alt-bg,
    .alt-bg > .alt-bg > .alt-bg,
    .alt-bg > .alt-bg .up-arrow { background:#f1f1f1; box-shadow:3px 3px 3px #ccc; }
.alt-bg > .alt-bg { margin:0px -5px -5px; }
.alt-bg > .alt-bg,
    .alt-bg > .alt-bg > .alt-bg > .alt-bg,
    .alt-bg .up-arrow,
    .alt-bg > .alt-bg > .alt-bg .up-arrow { background:#fff; }

.xo-wrapper { padding:10px 20px; }

divider { position:relative; display:block; border-bottom:1px dashed #596269; padding-top:20px; margin-bottom:20px; }

/* Title Tags */
main-title { position:relative; display:block; font-size:30px; line-height:30px; font-weight:700; color:#262c2f; padding:20px 0px; }
sub-title { position:relative; display:block; font-size:20px; line-height:20px; font-weight:700; color:#262c2f; padding:15px 0px 7px; }
field-title { position:relative; display:block; font-size:14px; line-height:20px; padding:5px 0px 2px; font-weight:700; color:#262c2f; }
side-text { position:relative; display:inline-block; font-size:14px; line-height:34px; padding:0px 5px; }
title-info { position:relative; display:inline-block; font-size:12px; color:#596269; font-weight:400; font-style:italic; }

/* Input-group styling */
input-group { font-size:0px; line-height:0px; }
input-group input, input-group select { height:34px; line-height:34px; font-size:14px; color:#3677cb; }
input-group prefix, input-group suffix, input-group infix { height:34px; line-height:34px; font-size:14px; color:#596269; }
input-group prefix { padding:0px 5px 0px; }
input-group suffix { padding-right:5px; }
input-group infix { padding:0px 3px; }
input-group span { line-height:34px; padding:0px 5px; color:#596269; }
input-group textarea { font-family: 'Open Sans', sans-serif; color:#3677cb; font-size:14px; border:0px; min-height:22px; max-width: calc(100% - 12px); min-width: calc(100% - 12px); background:transparent; padding:5px; outline: none; }
input-group[code] { background:#262c2f; border-color:#262c2f; }
input-group[code] textarea { color:#fff; min-height:150px; padding:20px; width: calc(100% - 34px); min-width: calc(100% - 34px); max-width: calc(100% - 34px); }
input-group[code] input { color:#fff; }

field-box { position:relative; display:block; margin-bottom:5px; }
field-box[inline] { display:inline-block; vertical-align:top; }

/* Buttons */
.xo-btn { vertical-align:top; height:36px; background:#ccc; border:0px; border-radius:5px; transition: all .5s ease; font-size:14px; padding:0px 10px; margin-bottom:5px; white-space:nowrap; transition:all .5s ease; box-shadow: 0px 0px 3px #fff inset; }
.xo-btn i { margin-right:3px; }
.btn-round { border-radius:50%; height:34px; width:34px; padding:0px; text-align:center; }
input-group button.xo-btn { margin:3px; height:28px; padding:0px 7px; }
input-group button.btn-round { border-radius:50%; width:28px; min-width:28px; height:28px; font-size:16px !important; line-height:12px; font-weight:700; padding:0px; text-align:center; margin:3px !important; box-shadow:none; }

.xo-btn.btn-green { background: linear-gradient(#6fd36f,#178d17); color:#fff; border:1px solid #29aa29; text-shadow:-1px -1px 1px #178d17; }
.xo-btn.btn-green:hover { background: linear-gradient(#29aa29,#6fd36f); }
.xo-btn.btn-green-2 { background: linear-gradient(#fff,#addeb6); color:#158315; border:1px solid #aacbb0; }
.xo-btn.btn-green-2:hover { background: linear-gradient(#addeb6,#ecfeef); }
.xo-btn.btn-green-3 { background: linear-gradient(#fff,#f1f1f1); color:#158315; border:1px solid #ccc; }
.xo-btn.btn-green-3:hover { background: linear-gradient(#f1f1f1,#fff); }

.xo-btn.btn-blue { background: linear-gradient(#5ea0f4,#3271c1); color:#fff; border:1px solid #3677cb; text-shadow:-1px -1px 1px #3677cb; }
.xo-btn.btn-blue:hover { background: linear-gradient(#3271c1,#5ea0f4); }
.xo-btn.btn-blue-2 { background: linear-gradient(#fff,#cce1f2); color:#3677cb; border:1px solid #b0c3d2; }
.xo-btn.btn-blue-2:hover { background:linear-gradient(#cce1f2,#fff); }
.xo-btn.btn-blue-3 { background: linear-gradient(#fff,#f1f1f1); color:#3677cb; border:1px solid #ccc; }
.xo-btn.btn-blue-3:hover { background: linear-gradient(#f1f1f1,#fff); }

.xo-btn.btn-red { background: linear-gradient(#f05f5f,#c00); border:1px solid #990000; color:#fff; text-shadow:-1px -1px 1px #990000; }
.xo-btn.btn-red:hover { background: linear-gradient(#c00,#f05f5f); color:#fff; }
.xo-btn.btn-red-2 { background: linear-gradient(#fff,#f5dad8); color:#990000; border:1px solid #d2b4b2; }
.xo-btn.btn-red-2:hover { background: linear-gradient(#f5dad8,#fff); }
.xo-btn.btn-red-3 { background: linear-gradient(#fff,#f1f1f1); color:#990000; border:1px solid #ccc; }
.xo-btn.btn-red-3:hover { background: linear-gradient(#f1f1f1,#fff); }

.menu-btn { position:absolute; right:0px; z-index:100; margin:4px; border-radius:50%; }


/* Toggle Password on and off */
password-toggle { color:#3677cb; line-height:34px; background:transparent; height:34px; }
password-toggle:hover { color:#5ea0f4; }

/* Have Fields auto-adjust to the box their contained in */
[auto-adjust] { width:100%; display:inline-flex; }
[auto-adjust] input, [auto-adjust] select, [auto-adjust] textarea, switch[auto-adjust] button, tab-group[auto-adjust] button { width:100%; }
[auto-adjust] input, [auto-adjust] select { padding:0px 5px; width: calc(100% - 10px); }

/* VI/CM */
vii, cogs { position:relative; display:inline-block; vertical-align:top; visibility:hidden; }
vii[active], cogs[active], [vii][active], [cogs][active] { visibility:visible; }

/* Help Tag */
help { position:absolute; display:inline-block; width:15px; height:15px; border:1px solid #ccc; text-align:center; border-radius:50%; font-size:11px; line-height:15px; box-shadow: 0px 0px 3px #ccc; color:#3677cb; margin-left:5px; margin-top:-5px; cursor:pointer; }
help:hover { background:#3677cb; border-color:#3677cb; color:#fff; }
help:after { content:'?'; }
help-db { position:absolute !important; display:inline-block; }

/* Checkbox */
checkbox-group { display:block; position:relative; }
checkbox-group span { padding-right:10px; line-height:34px; }
checkbox { position:relative; display:inline-block; vertical-align:top; border-radius:3px; border:1px solid #ccc; background:#ccc; color:#fff; width:20px; height:20px; min-height:20px; min-width:20px; margin:6px; line-height:20px; text-align:center; cursor:pointer; transition:all .5s ease; }
checkbox:hover { background:#f1f1f1; }
checkbox[checked] { border-color:#3677cb; background:#3677cb; }
checkbox[checked]::before { font-family:'FontAwesome'; top:0px; left:10px; content:"\f00c"; color:#fff; font-size:14px; }
checkbox[disabled] { background:#596269; border-color:#596269; cursor:not-allowed }
checkbox input { display:none; }
input-group checkbox { height:20px; width:20px; margin:6px; line-height:20px; }

/* Radio */
radio { position:relative; display:inline-block; text-align:center; vertical-align:top; width:20px; height:20px; margin:6px; line-height:20px; background:#ccc; border-radius:50%; border:1px solid #ccc; background:#ccc; cursor:pointer; transition:all .5s ease; }
radio:hover { background:#f1f1f1; }
radio[checked] { background:#3677cb; border-color:#3677cb; }
radio[checked]:before { content: "+"; position:relative; display:inline-block; width:10px; height:10px; border-radius:50%; transform: translate(0px,5px); background:#fff; color:transparent; }
radio[disabled] { background:#596269; border-color:#596269; cursor:not-allowed; }
radio input { display:none; }
input-group radio { width:25px; }

/* No Results */
result-message { position:relative; display:block; line-height:20px; font-size:16px; text-align:center; color:#596269; padding:20px; }

/* Rows */
row { position:relative; display:block; border-bottom:1px dashed #596269; padding:5px 10px 10px; }
row:last-of-type { border-bottom:0px; }

/* Tabs */
tab-box { display:block; position:relative; }
tab-box tab-group > button i { padding-right:5px; }
tab-group { display:block; position:relative; }
tab-group[toggle] { border-bottom:1px solid #596269; height:46px; font-size:0px; line-height:0px; white-space:nowrap; }
tab-group[toggle][compress] button { padding:0px 7px; font-size:12px; }
tab-group[toggle] > button { border:1px solid transparent; background:transparent; color:#3677cb; height:42px; font-size:14px; line-height:42px; padding:0px 15px; font-weight:700; }
tab-group[toggle] > button:hover { background:#f1f1f1; border-color:#f1f1f1; }
tab-group[toggle] > button[active] { color:#596269; border-color:#596269; border-top:3px solid #3677cb; border-bottom:1px solid #fff; height:47px; background:#fff; font-weight:700; border-radius:5px 5px 0px 0px; }
tab-group[contents] { }

tab-box[side] { display:flex; border:1px solid #ccc; box-shadow:0px 0px 5px #ccc; border-radius:5px; }
tab-box[side] > tab-group[toggle] { border-bottom:0px; border-right:1px solid #ccc; height:auto; margin-bottom:-1px; border-radius:5px 0px 0px 5px; }
tab-box[side] > tab-group[toggle] button { display:block; width:100%; text-align:left; border-left:3px solid #fff; border-bottom:1px solid #ccc; white-space:nowrap; font-weight:700; font-size:14px; border-radius:0px; }
tab-box[side] > tab-group[toggle] button:hover { border-color:#f1f1f1; }
tab-box[side] > tab-group[toggle] button:first-child { border-radius:3px 0px 0px 0px; }
tab-box[side] > tab-group[toggle] button:last-child { border-radius:0px 0px 0px 3px; }
tab-box[side] > tab-group[toggle] button[active] { border:0px; border-bottom:1px solid #ccc; border-left:3px solid #3677cb; background:#edf7ff; box-shadow:none; }
tab-box[side] > tab-group[contents] { width:100%; padding-top:0px; }
tab-box[side] > tab-group[contents] > tab-content { padding:10px; }

tab-content { display:none; position:relative; padding:10px 0px; border-radius:0px 0px 5px 5px; }
tab-content[active] { display:block; }

tab-label { position:relative; display:block; height:44px; color:#3677cb; border-radius:5px 5px 0px 0px; line-height:44px; padding:0px 10px; cursor:pointer; font-size:14px; font-weight:700; transition:all .5s ease; }
tab-label:before { float:left; display:inline-block; width:34px; height:44px; text-align:center; line-height:44px; color:#3677cb; content:'+'; font-size:24px; margin-left:-10px; font-weight:300; }
tab-label:hover { background:#edf7ff; }
tab-label[double] { line-height:10px; height:54px; overflow:hidden; }
tab-label[double]::before { height:54px; line-height:54px; }
tab-label field-title { display:block; padding-top:7px; white-space:nowrap; color:#3677cb; }
tab-label button { transform: translate(6px,9px); }
tab-label tab-content row button { transform: translate(0px,9px); }

small { position:relative; display:inline-block; font-size:12px; color:#596269; margin-right:10px; text-transform:capitalize; min-width:85px; }
small strong { display:inline-block; font-size:10px; }

tab-box > tab { display:block; position:relative; border:1px solid transparent; background:#e9edf0; /*box-shadow:2px -2px 5px #ccc; border:1px solid #ccc;*/ border-radius:5px; margin-top:5px; }
tab-box tab tab-content { padding:10px 0px 10px; }
tab-box tab[active] { border:1px solid #596269; background:#fff; border-radius:3px; }
tab-box tab[active] tab-label { color:#596269; background:#edf7ff; }
tab-box tab[active] tab-label:before { content:'_'; transform: translate(0,-12px); }
tab-box tab[active] > tab-content { display:block; padding:15px; }

/* Themed Tabs */
tab-box[theme="white"] > tab { border-width:0px; margin-top:0px; }
tab-box[theme="white"] tab:last-of-type tab-label { border-bottom:0px; }
tab-box[theme="white"] tab-label { background:#fff; border:0px; border-bottom:1px dashed #596269; border-radius:0px; font-weight:400; }
tab-box[theme="white"] tab-label:hover { background:#edf7ff; }
tab-box[theme="white"] tab[active] { border-width:1px; transform: translate(0px,-1px); }
tab-box[theme="white"] tab[active] > tab-label { border-color:transparent; border-radius:3px 3px 0px 0px; }
tab-box[theme="white"] tab[active] > tab-content { border-radius:0px; }
tab-box[theme="white"] tab-content[rows] { padding:0px 15px; }

/* Kendo Multi-select */
.k-multiselect { width:100%; }
.k-multiselect .k-button { background:#eff5fa; border-color:#e1ecf5; border-radius:3px; color:#336998 !important; margin:2px 2px 0px 2px; font-size:14px; }
.k-multiselect .k-button span { line-height:24px; padding:0px 2px 0px 0px; }
.k-list > .k-state-selected, .k-state-selected { color:#fff !important; background:#3271c1 !important; }
.k-list > .k-state-selected.k-state-focused, .k-state-selected.k-state-focused { box-shadow: inset 0 0 3px 1px #fff; }
.k-list > .k-state-hover { color:#fff !important; background:#3271c1 !important; }
.k-multiselect-wrap { border-color:transparent; }
.k-list-container { background:#f9f9f9; }
.k-input { height:26px !important; }
.k-input.k-readonly { font-style:italic; color:#ccc; opacity:1; }
div[id$="HIDEME-list"] { display:none !important; }
.k-multiselect.k-state-focused, .k-state-hover { box-shadow:none; border-color:transparent; background:none; }
.k-multiselect.k-state-focused .k-multiselect-wrap, .k-state-hover .k-multiselect-wrap { border-width:0px; box-shadow:none; }
input-group .k-widget { font-size:14px; }
.k-icon { height:22px; padding:0px; }

html .k-grid-header th.k-header { font-weight:700; }


/* MEDIA QUERIES */
@media print
{
    body * { visibility: hidden; }
    .section-to-print, .section-to-print * { visibility: visible; max-width:1000px; }
    .section-to-print { position: absolute; left: 0; top: 0; }
    .compareMoreDetails { display:block !important; }
    .dontprintme { display:none; }
    .print-only { display:block; }
    .printHeader { display: block !important; }
}
@media (max-width:700px)
{
    loggedIn { text-align:center; }
    help-text { display:none; }
}
@media (max-width:600px)
{
    loggedIn .loggedInAsBox { font-size:12px; }
    loggedIn .loggedInAsBox b { display:none; }
    settings name { display:none; }
    settings bubble { border-radius:50%; width:28px; padding:0px; }
    help-text { display:none; }
    .loggedInAsBox text, .loggedInAsBox selection-link { font-size:10px; }
}
@media (max-width:500px)
{
    loggedIn .loggedInAsBox { padding-left:5px; }
    .loggedInAsBox span, .loggedInAsBox strong { max-width:70px; font-size:10px; }
    invoice selection { max-width:50px; overflow:hidden; text-overflow:ellipsis; }
}


/* ANIMATION KEYFRAMES */
@keyframes selected
{
    0% { box-shadow:0px 0px 0px #fff inset; }
    100% { box-shadow:0px 0px 10px #fff inset; }
}
@keyframes fillMeIn
{
    0% { transform: rotate(0deg) scale(1.3); background:#ff9595; }
    20% { transform: rotate(5deg); }
    40% { transform: rotate(-5deg); }
    60% { transform: rotate(2deg) scale(.9); }
    80% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg) scale(1); background:#fff; }
}
@keyframes noticeMe
{
    0% { transform: rotate(0deg) scale(1.3); }
    20% { transform: rotate(5deg); }
    40% { transform: rotate(-5deg); }
    60% { transform: rotate(2deg) scale(.9); }
    80% { transform: rotate(-2deg); }
    100% { transform: rotate(0deg) scale(1); }
}
@keyframes recentAddition
{
    0% { background-color:#d8f5d7; transform: scale(0,0); }
    50% { background-color:#d8f5d7; transform: scale(1,1); }
    100% { background-color:#fff; transform: scale(1,1); }
}
@keyframes recentRemoval
{
    0% { background-color:#fff; transform: scale(1,1) translate(0px,0px); }
    100% { background-color:#f1bebe; transform: scale(.10,.10) translate(0px,-225px); }
}
@keyframes slideUp
{
    0% { max-height:500px; opacity:1; }
    100% { max-height:0px; opacity:0; }
}
@keyframes slideDown
{
    0% { max-height:0px;}
    100% { max-height:500px; }
}

/* ADDS MOBILE COMPATIBILITY */
@media (hover: none) and (pointer: coarse)
{
    html, body { height:100%; overflow: scroll; -webkit-overflow-scrolling:touch; }
}